<script setup>
// 接收父组件传递的数据
let parent = defineProps({
  'items': {type: Array, required: true},
  'title': {type: String, required: false, default: '详情信息'},
  'column': {type: Number, required: false, default: 1},
});
</script>

<template>
  <el-descriptions class="my-list" border label-align="center"
                   :title="title"
                   :column="column">
    <el-descriptions-item v-for="item in items" :key="item" min-width="100"
                          :width="item['width']" || 30
                          :label="item['label']"
                          :span="item['span'] || 1">
      <template #default>

        <el-tag v-if="item['type'] === 'tag'"
                :type="item['tagType'] || 'warning'">
          <span>{{ item['prefix'] }}</span>
          <span v-if="item['format']">{{ item['format'](item['value']) }}</span>
          <span v-else>{{ item['value'] }}</span>
          <span>{{ item['suffix'] }}</span>
        </el-tag>

        <el-rate v-else-if="item['type'] === 'star'" disabled show-score text-color="#ff9900"
                 v-model="item['value']" score-template="{value} 分"/>

        <el-card v-else-if="item['type'] === 'card'">
          <span>{{ item['prefix'] }}</span>
          <span v-if="item['format']">{{ item['format'](item['value']) }}</span>
          <span v-else>{{ item['value'] }}</span>
          <span>{{ item['suffix'] }}</span>
        </el-card>

        <!--preview-teleported用于解决图片Z轴遮挡问题-->
        <el-image v-else-if="item['type'] === 'img'" fit="fill" preview-teleported
                  :src="item['minio'](item['value'])"
                  :preview-src-list="[item['minio'](item['value'])]"
                  :class="{'large': item['large']}"/>

        <el-button v-else-if="item['type'] === 'icon'" plain
                   :type="item['iconType'] || 'primary'"
                   :size="item['iconSize'] || 'small'"
                   :icon="item['value']">
        </el-button>

        <div v-else>
          <span>{{ item['prefix'] }}</span>
          <span v-if="item['format']">{{ item['format'](item['value']) }}</span>
          <span v-else>{{ item['value'] }}</span>
          <span>{{ item['suffix'] }}</span>
        </div>

      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style scoped lang="scss">
.my-list {
  .el-image {
    width: 100px; // 宽度
    height: 100px; // 高度
  }

  .large {
    width: 200px; // 宽度
    height: 100px; // 高度
  }
}

</style>